import React, {Component,} from 'react'
import {connect} from 'react-redux'
import {withRouter,} from 'react-router-dom'

import './live.css'
import {WingBlank, WhiteSpace} from "antd-mobile";
import CornerYellowRed from "./CornerYellowRed/CornerYellowRed";
import StatsList from "./StatsList/StatsList";
import TLiveList from "./TLiveList/TLiveList";

class Live extends Component {

    componentDidMount() {
        // const ctn = getDom('[aria-labelledby="m-tabs-0-0"]')
        // const ctn = getDom('.am-tabs-pane-wrap-active')
        // const scrollCallback = _.throttle(() => {
        //     const content = this.ctnContent
        //     const contentHeight = content.scrollHeight
        //     const afterScrollHeight = document.documentElement.clientHeight - 64 - 43.5
        //     const top = ctn.scrollTop
        //
        //     if (top > 0 && afterScrollHeight < contentHeight) {
        //         this.props.setAtTop(false)
        //     } else if (top === 0) {
        //         this.props.setAtTop(true)
        //     }
        // }, 100)
        // if (ctn) {
        //     bindEvent(ctn, 'scroll', scrollCallback)
        // }
        // this.props.setContentCtn(this.ctnContent, this.props.bindScrollEvent)

        // let ctn = getDom('.am-tabs-pane-wrap-active')
        //
        // const scrollCallback = _.throttle(() => {
        //     const content = this.ctnContent
        //     const contentHeight = content.scrollHeight
        //     const afterScrollHeight = document.documentElement.clientHeight - 64 - 43.5
        //     const top = ctn.scrollTop
        //     if (top > 0 && afterScrollHeight < contentHeight) {
        //         this.props.setAtTop(false)
        //     } else if (top === 0) {
        //         this.props.setAtTop(true)
        //     }
        // }, 100)
        // if (ctn) {
        //     bindEvent(ctn, 'scroll', scrollCallback)
        // }
        // this.bindScrollEvent()
        this.props.setContentCtn(this.ctnContent, this.props.bindScrollEvent)
    }


    // bindScrollEvent = () => {
    //     const ctn = getDom('.am-tabs-pane-wrap-active')
    //     const scrollCallback = _.throttle(() => {
    //         const content = this.ctnContent
    //         const contentHeight = content.scrollHeight
    //         const afterScrollHeight = document.documentElement.clientHeight - 64 - 43.5
    //         const top = ctn.scrollTop
    //
    //         if (top > 0 && afterScrollHeight < contentHeight) {
    //             this.props.setAtTop(false)
    //         } else if (top === 0) {
    //             this.props.setAtTop(true)
    //         }
    //     }, 100)
    //     if (ctn) {
    //         bindEvent(ctn, 'scroll', scrollCallback)
    //     }
    // }


    render() {
        const game = this.props.game

        let {
            // info,
            // matchevent,
            home_team,
            away_team,
            tlive,
            stats,
        } = game


        if (tlive[0].type === 0) {
            tlive = tlive.reverse()
        }

        // eslint-disable-next-line array-callback-return
        stats.map(stat => {
            const type = stat.type
            home_team[type] = stat.home
            away_team[type] = stat.away
        })

        // if (info.statusid === 999) return null

        return <div ref={el => this.ctnContent = el}>
            <WingBlank>
                <WhiteSpace/>

                <div className='flex-space-between-align-center'>
                    <CornerYellowRed team={home_team} type='home'/>
                    <CornerYellowRed team={away_team} type='away'/>
                </div>

                <WhiteSpace size='xs'/>

                <StatsList stats={stats}/>

                <WhiteSpace/>

                <TLiveList tlive={tlive}/>

            </WingBlank>
        </div>
    }

}


const mapState = state => ({
    game: state.game.currentGame,
    games: state.game.games,
})

const mapDispatch = dispatch => ({
    doFetchGameDetail: (payload) => dispatch.game.doFetchGameDetail(payload),
    setInitCurrentGame: () => dispatch.game.setInitCurrentGame(),
})

export default connect(mapState, mapDispatch)(withRouter(Live))
